<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>竞赛汇总</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/allCompete.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
    <script src="./js/login.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="header">
        <img class="logo-l" src="./imgs/logo.png">
        <div class="topnav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li class="on"><a href="allCompete.html">竞赛汇总</a></li>
                <li><a href="joinTeam.html">组队</a></li>
                <li><a href="community.html">社区</a></li>
                <li><a href="jobs.html">实习求职</a></li>
                <li><a href="">优秀作品</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search-box">
            <input id="top_search" type="search" placeholder="搜比赛或用户">
        </div>
        <!-- 头像 -->
        <div class="logoinbox" id="loginbox">
            <img class="logo" src="./imgs/logo.png">
            <span><a href="./login.html">登录</a></span>
        </div>
    </div>

    <!-- 焦点图 -->
    <div class="bann-wrap">
        <!-- Swiper -->
        <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
            <div class="swiper-wrapper" style="transform: translate3d(-7732px, 0px, 0px); transition-duration: 0ms;">
                <div class="swiper-slide">
                    <a href="#"><img src="./imgs/bann5.jpg"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./imgs/bann2.jpg"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./imgs/bann3.jpg"></a>
                </div>
                <div class="swiper-slide swiper-slide-active">
                    <a href="#"><img src="./imgs/bann6.jpg"></a>
                </div>
            </div>

            <!-- 圆点 -->
            <div class="swiper-pagination"></div>
            <!-- 箭头 -->
            <!-- <div class="swiper-button-next swiper-button-disabled" tabindex="0" role="button" aria-label="Next slide" aria-disabled="true"></div> -->
            <!-- <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false"></div> -->
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
        <script src="./js/swiper.min.js"></script>
        <script>
            $(function () {
                var swiper = new Swiper('.swiper-container', {
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: {
                        delay: 4000,
                        disableOnInteraction: false,
                    },
                    // 小圆点
                    // pagination: {
                    //     el: '.swiper-pagination',
                    //     clickable: true,
                    // },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            })
        </script>
    </div>

    <!-- 目的地-菜单部分 -->
    <div class="menu">
        <div class="con-wrap">
            <div class="mdd-wrap">
                <div class="mdd-box">

                    <div class="mdd-item">
                        <div class="m-tit">竞赛类别</div>
                        <ul class="m-list">
                            <li class="m-fd">
                                <p class="all">全部</p>
                            </li>
                            <li class="m-fd">
                                <p>工科</p>
                                <ul class="child-list">
                                    <li><a href="#">数字建模</a></li>
                                    <li><a href="#">程序设计</a></li>
                                    <li><a href="#">土木建筑</a></li>
                                    <li><a href="#">数字建模</a></li>
                                    <li><a href="#">程序设计</a></li>
                                    <li><a href="#">土木建筑</a></li>
                                </ul>
                            </li>
                            <li class="m-fd">
                                <p>文化</p>
                                <ul class="child-list">
                                    <li><a href="#">工业＆创意设计</a></li>
                                    <li><a href="#">外语</a></li>
                                    <li><a href="#">演讲主持＆辩论</a></li>
                                    <li><a href="#">模特</a></li>
                                    <li><a href="#">歌舞书画＆摄影</a></li>
                                    <li><a href="#">体育</a></li>
                                </ul>
                            </li>
                            <li class="m-fd">
                                <p>理科</p>
                                <ul class="child-list">
                                    <li><a href="#">化学化工</a></li>
                                    <li><a href="#">力学</a></li>
                                </ul>
                            </li>
                            <li class="m-fd">
                                <p>商科</p>
                                <ul class="child-list">
                                    <li><a href="#">创业</a></li>
                                    <li><a href="#">商业</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div class="mdd-item">
                        <div class="m-tit">竞赛级别</div>
                        <ul class="m-list">
                            <li class="m-fd">
                                <p class="all">全部</p>
                            </li>
                            <li class="m-fd">
                                <p>校级</p>
                            </li>
                            <li class="m-fd">
                                <p>市级</p>
                            </li>
                            <li class="m-fd">
                                <p>省级</p>
                            </li>
                            <li class="m-fd">
                                <p>国家级</p>
                            </li>
                            <li class="m-fd">
                                <p>国际级</p>
                            </li>
                            <li class="m-fd">
                                <p>自由</p>
                            </li>
                        </ul>
                    </div>

                    <div class="mdd-item">
                        <div class="m-tit">排序方式</div>
                        <ul class="m-list">
                            <li class="m-fd">
                                <p class="all">近期报名</p>
                            </li>
                            <li class="m-fd">
                                <p>近期更新</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>